<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
</style>
<div id="app">
    <el-container>
        <el-header style="font-size:40px;">
            -----------------------实验报告上传系统-----------------------
            <el-button type="info" size="mini" round @click="logout">退出登录</el-button>

        </el-header>

        <el-container>
            <el-aside width="200px">
                <!--左侧导航栏-->
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>作业和文件管理</template>
                        <el-menu-item-group>

                            <el-menu-item index="1-1" @click="ToTeacherHome">个人主页</el-menu-item>
                            <el-menu-item index="1-2" @click="ToCourseForTea">课程管理</el-menu-item>
                            <el-menu-item index="1-3" @click="">作业项目管理</el-menu-item>
                            <el-menu-item index="1-4" @click="ToStuFile">作业文件管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>
            <el-main>

                <!--条件查询表单-->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <!--所属课程-->
                    <el-form-item label="课程" label-width="120px" prop="searchForm.courseId" align="left">
                        <el-select
                                v-model="searchForm.courseId"
                                placeholder="请选择课程"
                        >
                            <el-option v-for="(item,index) in CourseTableData" :key="index" :label="item.cname" :value="item.cno" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="selectHomeWorkByCodition">查询</el-button>
                    </el-form-item>
                </el-form>

                <!--添加表单-->
                <div align="right" >
                    <el-button type="primary"
                               @click="dialogFormVisible = true">新增作业项目</el-button>
                </div>

                <el-dialog title="新增作业项目" :visible.sync="dialogFormVisible">
                    <el-form :model="addForm">

                        <el-form-item label="作业名" label-width="120px">
                            <el-input v-model="addForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                <!--        <el-form-item label="教师编号" label-width="120px">
                            <el-input v-model="addForm.tno" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="教师姓名" label-width="120px">
                            <el-input v-model="addForm.teacherName" autocomplete="off"></el-input>
                        </el-form-item>-->

                        <!--所属课程-->
                        <el-form-item label="课程" label-width="120px" prop="addForm.courseId" align="left">
                            <el-select
                                    v-model="addForm.courseId"
                                    placeholder="请选择课程"
                            >
                                <el-option v-for="(item,index) in CourseTableData" :key="index" :label="item.cname" :value="item.cno" />
                            </el-select>
                        </el-form-item>

                   <!--     <el-form-item label="班级" label-width="120px" prop="addForm.classId" align="left">
                            <el-select
                                    v-model="addForm.classId"
                                    placeholder="请选择班级"
                            >
                                <el-option v-for="(item,index) in ClassTableData" :key="index" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>-->

                        <el-form-item label="作业描述" label-width="120px">
                            <el-input type="textarea" v-model="addForm.description" autocomplete="off"></el-input>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addHandle">确 定</el-button>
                    </div>
                </el-dialog>

                <!--表格-->
                <el-table :data="homewokeTableData" border>

                    <el-table-column prop="id" label="作业号" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="作业项目名" width="120">
                    </el-table-column>
                    <el-table-column prop="cname" label="适用课程" width="120">
                    </el-table-column>
                <!--    <el-table-column prop="className" label="适用班级" width="120">
                    </el-table-column>-->
                    <el-table-column prop="description" label="作业描述" width="240">
                    </el-table-column>

                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                        <el-button type="primary" plain @click="selectById(scope.row.id)">编辑</el-button>
                            <!--编辑对话框表单-->
                            <el-dialog title="修改信息" :visible.sync="updateDialogFormVisible">
                                <el-form :model="updateForm">
                                    <el-form-item label="作业名" label-width="120px">
                                        <el-input v-model="updateForm.name" autocomplete="off"></el-input>
                                    </el-form-item>
                         <!--           <el-form-item label="教师编号" label-width="120px">
                                        <el-input v-model="updateForm.tno" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="教师姓名" label-width="120px">
                                        <el-input v-model="updateForm.teacherName" autocomplete="off"></el-input>
                                    </el-form-item>-->

                                    <!--所属课程-->
                                    <el-form-item label="课程" label-width="120px" prop="updateForm.courseId" align="left">
                                        <el-select
                                                v-model="updateForm.courseId"
                                                placeholder="请选择课程"
                                        >
                                            <el-option v-for="(item,index) in CourseTableData" :key="index" :label="item.cname" :value="item.cno" />
                                        </el-select>
                                    </el-form-item>

                           <!--         <el-form-item label="班级" label-width="120px" prop="updateForm.classId" align="left">
                                        <el-select
                                                v-model="updateForm.classId"
                                                placeholder="请选择班级"
                                        >
                                            <el-option v-for="(item,index) in ClassTableData" :key="index" :label="item.name" :value="item.id" />
                                        </el-select>
                                    </el-form-item>-->

                                    <el-form-item label="是否开放作业" label-width="120px" align="left" prop="updateForm.ddlFlag">
                                        <el-select v-model="updateForm.ddlFlag" placeholder="是否开放作业" >
                                            <el-option label="截止" :value="0"></el-option >
                                            <el-option label="开放" :value="1"></el-option><!--value必须要加":",否则无法渲染成男女-->
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="作业描述" label-width="120px">
                                        <el-input type="textarea" v-model="updateForm.description" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="updateDialogFormVisible=false">取 消</el-button>
                                    <el-button type="primary" @click="updateById(scope.row.id)">确 定</el-button>
                                </div>

                            </el-dialog>
                            <el-button type="danger" plain @click="deleteHandle(scope.row.id)">删除</el-button>
                            <el-button type="info" plain @click="selectUnsubmitStu(scope.row.id,scope.row.courseId)">
                                提交情况
                            </el-button>
                        </template>
                    </el-table-column>



                </el-table>

                <!--作业提交情况对话框表格-->
                <el-dialog title="未提交作业学生信息" :visible.sync="unSubmitStuDialogFormVisible">
                    <el-table :data="unSubmitStuTableData" border>

                        <el-table-column prop="sno" label="学号" width="120">
                        </el-table-column>
                        <el-table-column prop="username" label="姓名" width="100">
                        </el-table-column>
                        <el-table-column prop="email" label="邮箱" width="200">
                        </el-table-column>
                    </el-table>

                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary"  @click="unSubmitStuDialogFormVisible=false">返 回</el-button>
                        <el-button type="success" @click="unSubmitStuDialogFormVisible=false">通 知</el-button>
                    </div>
                </el-dialog>

            </el-main>
        </el-container>
    </el-container>

</div>

</body>
</html>

<script>

    new Vue({
        el: "#app",
        data: {
            searchForm:{
                courseId:''
            },
            unSubmitStuDialogFormVisible:false,
            unSubmitStuTableData:[{
                sno: "2015200050",
                username: "谢文健",
                email: "1552005509@qq.com"
            }],
            CourseTableData:[],
            ClassTableData:[],
            updateDialogFormVisible: false,
            dialogFormVisible: false,
            dialogVisible: false,
            page: 1,
            pageSize: 10,
            homewokeTableData: [{
                id: 1,
                name: '实验1',
                className: '信计201',
                description: '4.20前提交',
                courseId:''
            }],
            addForm: {
                name: '',
                description: '',
                classId: '',
                courseId:''
            },
            updateForm: {
                id:'',
                name: '',
                description: '',
                ddlFlag: ''
            }
        },
        methods: {
            selectUnsubmitStu(id,courseId){
                this.unSubmitStuDialogFormVisible=true;
                axios.get("/students/selectUnsubmitStu?id="+id+"&courseId="+courseId).then(res=>{
                    if (res.data.code === 1) {
                       this.unSubmitStuTableData=res.data.data;
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }

                })
            },
            logout(){
                axios.get("/logout").then(res=>{
                    if (res.data.code === 1) {
                        localStorage.removeItem("user");
                        window.location.href = 'login.html';
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }

                })
            },
            updateById(id){
                this.updateDialogFormVisible=false;
                axios.put("/homeworks",{
                     ...this.updateForm
                }).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('修改成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectHomeWork();
                })
            },
            selectById(id){
                this.updateDialogFormVisible=true;
                axios.get("/homeworks/"+id).then(res=>{
                    this.updateForm=res.data.data;
                })
            },
            addHandle(){
                this.dialogFormVisible=false;
                axios.post("/homeworks",{
                    ...this.addForm
                }).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('添加成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectHomeWork();
                })
            },
            deleteById(id){
                axios.delete("/homeworks/"+id).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('删除成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectHomeWork();
                })
            },
            deleteHandle(id){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                   this.deleteById(id);
                })

            },
            ToStuFile() {
                window.location.href = 'stuFile.html';
            },
            ToTeacherHome(){
                window.location.href = 'teacherHome.html';
            },
            ToCourseForTea(){
                window.location.href = 'courseForTea.html';
            },
            selectHomeWork() {
                axios.get("/homeworks").then(res => {
                    if (res.data.code != 1) {
                        alert(res.data.msg);
                    } else {
                        this.homewokeTableData = res.data.data;
                    }

                })
            },
            selectHomeWorkByCodition() {
                axios.get("/homeworks?courseId="+this.searchForm.courseId).then(res => {
                    if (res.data.code != 1) {
                        alert(res.data.msg);
                    } else {
                        this.homewokeTableData = res.data.data;
                    }

                })
            },
            selectCourse() {
                axios.get("/course").then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.CourseTableData = res.data.data;
                    }

                })
            },
            selectClass(){
                //获取班级信息
                axios.get("/class").then(res => {
                    if (res.data.code != 1) {
                        alert(res.data.msg);
                    } else {
                        this.ClassTableData = res.data.data;
                    }
                })
            }
        },
        mounted() {
            if(localStorage.getItem("user")==null){
                window.location.href='login.html';
            }
            this.selectHomeWork();
            this.selectClass();
            this.selectCourse();

        }
    })
</script>